<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="部门" prop="deptID">
                <el-select v-model="ruleForm.deptID" placeholder="请选择角色部门">
                    <el-option v-for="(item, index) in Department" :key="index" :label="item.deptName"
                        :value="item.deptID"></el-option>
                </el-select>
            </el-form-item>
            <label style="margin: 20px;color: coral;">角色名称不能与其他账号重复，否则会引发500错误！！！</label>
            <el-form-item label="角色名称" prop="RoleName">
                <el-input v-model="ruleForm.RoleName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            
            <el-form-item label="角色描述" prop="Remark">
                <el-input type="textarea" v-model="ruleForm.Remark" placeholder="请输入..."></el-input>
            </el-form-item>
            <el-form-item>
                <el-button plain type="primary" @click="submitForm('ruleForm')">新增角色</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "Add",
    data() {
        return {
            Department: [],
            ruleForm: {
                RoleName: null,
                deptID: null,
                Remark: null,
                Type: 1
            },
            rules: {
                RoleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                Remark: [{ required: true, message: "请描述角色", trigger: "blur" }],
                deptID: [{ required: true, message: "请选择角色部门", trigger: "change" }]
            }
        };
    },
    model: {
        prop: "dialogFormVisible",
        event: "change",
    },
    props: {
        dialogFormVisible: Boolean,
    },
    methods: {
        //提交表单
        submitForm(formName) {
            console.log(this.ruleForm);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: "POST",
                        url: "Roles",
                        data: JSON.stringify(this.ruleForm),
                        headers: {
                            Authorization: sessionStorage.getItem("token"),
                            "Content-Type": "application/json",
                        },
                    })
                        .then((res) => {
                            if (res.data.code > 0) {
                                this.$notify({
                                    title: "成功",
                                    message: res.data.msg,
                                    type: "success",
                                });
                                // 触发刷新
                                this.$emit("refresh");
                                this.$emit("change", false);

                            } else {
                                this.$notify.error({
                                    title: "错误",
                                    message: res.data.msg,
                                });

                                this.$notify.error({
                                    title: "错误",
                                    message: res.data.msg,
                                });

                            }
                        })
                        .catch((err) => {
                            console.log("err: ", err);
                            this.$notify.error({
                                title: "错误",
                                message: err.message,
                            });
                        });

                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        //获取部门数据
        this.axios({
            method: "get",
            url: "Department",
            headers: {
                Authorization: sessionStorage.getItem("token"),
            },
        }).then((res) => {
            this.Department = res.data.data;
            this.ruleForm.deptID = this.Department[0].deptID;
        });
    }
};
</script>